import React, {lazy} from 'react';
import {Route,Switch} from 'react-router-dom';
import IScroll from '../../../assets/js/libs/iscroll';
import {deepClone, localParam} from '../../../assets/js/utils/index';
import  * as Request from '../../../services/home/index';
import Css from '../../../assets/css/goods/classify.css';
import SearchComponent from '../../../components/search';
const GoodsItems = lazy(()=>import('./items'));

class Classify extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            aClassify: [],
            showSearch: false
        }
        this.myScroll = null;
        this.aTemp = [];
        this.cid = localParam(props.location.search) ? localParam(props.location.search).search.cid : '492';
    }

    componentDidMount(){
        this.getClassifyData();
    }

    componentWillUnmount(){
        //页面卸载时，重写setState,避免内存溢出
        this.setState = (state, callback) => {
            return ;
        }
    }

    getClassifyData(){
        Request.getClassifyData().then(res => {
            if(res.code === 200){
                this.aTemp = deepClone(res.data);
                this.aTemp.map(item => item.active = false);
                this.setState({ aClassify: res.data }, () =>{ 
                    this.eventScroll(); 
                    this.getDefaultActive();
                });
            }
        });
    }

    getDefaultActive(){
        this.aTemp.map(item => {
            if(item.cid === this.cid){ item.active = true; }
        });
        this.setState({ aClassify: this.aTemp });
    }

    eventScroll(){
        document.getElementById('scroll-classify').addEventListener('touchmove',function(e){ e.preventDefault(); }, false);
        this.myScroll = new IScroll('#scroll-classify', {
            scrollX: false,
            scrollY: true,
            preventDefault: false
        });
    }

    goBack(){
        this.props.history.goBack();
    }

    goPage(url){
        this.props.history.replace(window.base.config.path+url);
    }

    //控制显示隐藏搜索组件
    displaySearch(){
        this.setState({ showSearch: !this.state.showSearch });
    }

    //处理点击滚动
    handleScroll(index){
        const oScrollClassify = document.getElementById('scroll-classify');
        let iTopHeight = Math.round(parseInt(this.refs['item-'+index].offsetHeight)*index);
        let iHalfHeight = Math.round(oScrollClassify.offsetHeight / 3);
        let iBottomHeight = oScrollClassify.scrollHeight - iTopHeight; 
        if(iTopHeight >= iHalfHeight && iBottomHeight > oScrollClassify.offsetHeight){
            this.myScroll.scrollTo(0, -iTopHeight, 300, IScroll.utils.ease.elastic);
        }
    }

    changeStyle(url, index){
        const aTemp = this.aTemp;
        if(aTemp && aTemp.length > 0){
            for(let i = 0; i < aTemp.length; i++){
                if(aTemp[i].active) aTemp[i].active = false;
            }
            aTemp[index].active = true;
        }
        this.setState({ aClassify: aTemp });
        this.handleScroll(index);
        this.goPage(url);
    }

    render(){
        const { aClassify, showSearch } = this.state;
        return (
            <React.Fragment>
                <div className={Css['search-header']}>
                    <div className={Css['back']} onClick={() => this.goBack()}></div>
                    <div className={Css['search-area']} onClick={() => this.displaySearch()}>请输入宝贝名称</div>
                </div> 
                <div className={Css['goods-main']}>
                    <div id='scroll-classify' className={Css['classify-wrap']}>
                        <div>
                            {
                               aClassify !== null ? aClassify.map((item,index) => {
                                    return (
                                    <div key={item.cid} ref={'item-'+index} className={item.active ? Css['classify-item']+' '+Css['active'] : Css['classify-item']} onClick={()=>this.changeStyle('goods/classify/items?cid='+item.cid, index)}>{item.title}</div>
                                    )
                               }) : ''
                            }
                        </div>
                    </div>
                    <div className={Css['goods-content']}>
                        <Switch>
                            <Route path={window.base.config.path+'goods/classify/items'} component={GoodsItems}></Route>
                        </Switch>
                    </div>
                </div>
                {/* 搜索组件 */}
                {showSearch && <SearchComponent closeSearch={() => this.displaySearch()}></SearchComponent>}
            </React.Fragment>
        )
    }
}

export default Classify;